<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行星</title>
		<style type="text/css">
			 
			.lizi{
				float: left;
				margin-left: 10px;
				position:relative;
				border: 1px solid #FFC0CB;
			    width: 10px;
				height: 10px;
				border-radius: 5px;
				background-color: #FFC0CB;
				 animation: name 5s infinite;
			}
		
			.xxx{
				position:relative;float: left;margin-left: 10px;
				width: 20px;height: 1.25rem; background-color: #8B4513;
				animation: move 5s infinite;
								
			}
			@keyframes name{
			        0% {
			           transform: translate(0px, 0px);   
			        } 
							   
			        50% {                
			           transform: translate(100px, 150px);     
			        }            
			        100% {                
			           transform: translate(0px, 0px);    
			        }
			}
			
			@keyframes  move{
				from{top: 0px;opacity: 1;}
				to{top: 500px;opacity: 0;}
			     
			}
			 
		</style>
		<link rel="stylesheet" href="./css/行星_css.css" />
	</head>
	<body>
		 
			 <div class="lizi"></div>
			 <div class="lizi"></div> 
			 <div class="lizi"></div> 
			 <div class="lizi"></div> 
			 <div class="lizi"></div> 		 
					 
		<div class="xxx"></div>
		<div class="xxx"></div>
		<div class="xxx"></div>
		<div class="xxx"></div>
		<div class="xxx"></div>
		<div class="xxx"></div>
		
		
		<div class="container"  >
			<div class="planet">
				
			</div>
		</div>
		
	</body>
</html>
